<template>
  <div class="content-container">
    <sreenItem @saveNum="saveNum"></sreenItem>
    <a-table
      :columns="columns"
      :data-source="tableData"
      size="middle"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      :rowKey="(record) => record.taskId"
    >
      <span slot="itemIndex" slot-scope="text, tags, i">{{ i + 1 }}</span>
      <span slot="type" slot-scope="type">
        {{ type | deviceTypeTransfer }}
      </span>
      <a slot="taskId" slot-scope="taskId">{{ taskId }}</a>
      <span slot="operation" slot-scope="text, tags">
        <a @click="showModal(tags.taskId)">查看详情</a>
      </span>
    </a-table>
    <!-- 查看详情弹框 -->
    <a-modal
      title="详情"
      :width="1000"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleOk"
    >
      <!-- 当前记录 -->
      <!-- 设备记录 -->
      <a-descriptions
        bordered
        v-for="item in detailData"
        :key="item.starlinkId"
        class="device-container"
      >
        <a-descriptions-item label="设备ID/名称">
          {{ item.starlinkId }}
        </a-descriptions-item>
        <a-descriptions-item label="设备类型">
          {{ currentDeviceType | deviceTypeTransfer }}
        </a-descriptions-item>
        <!-- 底座 -->
        <a-descriptions-item
          v-if="currentDeviceType === 1"
          label="红网升级状态"
        >
          {{ item.red_upgrade_status }}
        </a-descriptions-item>
        <a-descriptions-item
          v-if="currentDeviceType === 1"
          label="红网升级时间"
        >
          {{ item.upgrade_time }}
        </a-descriptions-item>
        <a-descriptions-item
          v-if="currentDeviceType === 1"
          label="蓝网升级状态"
        >
          {{ item.blue_upgrade_status }}
        </a-descriptions-item>
        <a-descriptions-item
          v-if="currentDeviceType === 1"
          label="蓝网升级时间"
        >
          {{ item.upgrade_time }}
        </a-descriptions-item>
        <!-- 大算力 -->
        <a-descriptions-item v-if="currentDeviceType === 2" label="升级状态">
          {{ item.upgrade_status }}
        </a-descriptions-item>
        <a-descriptions-item v-if="currentDeviceType === 2" label="升级时间">
          {{ item.upgrade_time }}
        </a-descriptions-item>
        <!-- 大算力 -->
        <a-descriptions-item
          v-if="currentDeviceType === 4 || currentDeviceType === 3"
          label="升级状态"
        >
          {{ item.upgrade_status }}
        </a-descriptions-item>
        <a-descriptions-item
          v-if="currentDeviceType === 4 || currentDeviceType === 3"
          label="升级时间"
        >
          {{ item.upgrade_time }}
        </a-descriptions-item>
        <a-descriptions-item
          v-if="currentDeviceType === 4 || currentDeviceType === 3"
          label="期待版本"
        >
          {{ item.anquan_afr.expect_version }}
        </a-descriptions-item>
        <a-descriptions-item
          v-if="currentDeviceType === 4 || currentDeviceType === 3"
          label="期待md5"
        >
          <span
            :class="
              item.anquan_afr.currnet_md5 !== item.anquan_afr.expect_md5
                ? 'active'
                : ''
            "
            >{{ item.anquan_afr.expect_md5 }}</span
          >
        </a-descriptions-item>
        <a-descriptions-item
          v-if="currentDeviceType === 4 || currentDeviceType === 3"
          label="当前版本"
        >
          {{ item.anquan_afr.expect_md5 }}
        </a-descriptions-item>
        <a-descriptions-item
          v-if="currentDeviceType === 4 || currentDeviceType === 3"
          label="当前md5"
        >
          <span
            :class="
              item.anquan_afr.currnet_md5 !== item.anquan_afr.expect_md5
                ? 'active'
                : ''
            "
            >{{ item.anquan_afr.currnet_md5 }}</span
          >
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<script>
import sreenItem from '../../components/sreenItem/screenItem.vue';
import { getupgradeTask, getStarlinkUpgradeStatus } from '../../services/user';
export default {
  data() {
    return {
      start: window.localStorage.getItem('startTime'),
      end: window.localStorage.getItem('endTime'),
      tableData: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      visible: false,
      loading: false,
      currentDeviceType: 1,
      columns: [
        {
          title: '序号',
          dataIndex: 'itemIndex',
          scopedSlots: { customRender: 'itemIndex' },
        },
        {
          title: '升级任务ID',
          dataIndex: 'taskId',
          key: 'taskId',
          scopedSlots: { customRender: 'taskId' },
        },
        {
          title: '类型',
          dataIndex: 'type',
          scopedSlots: { customRender: 'type' },
        },
        {
          title: '升级人员',
          dataIndex: 'operator',
        },
        {
          title: '开始时间',
          dataIndex: 'start_time',
        },
        {
          title: '更新时间',
          dataIndex: 'update_time',
        },
        {
          title: '升级状态',
          dataIndex: 'task_status',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      detailData: [],
    };
  },

  components: {
    sreenItem,
  },
  methods: {
    showModal(taskId) {
      getStarlinkUpgradeStatus({
        taskId: taskId,
      }).then((res) => {
        this.detailData = res.data.result;
        this.currentDeviceType = res.data.type;
        this.visible = true;
      });
    },
    handleOk() {
      this.visible = false;
    },
    handleCancel() {
      this.visible = false;
    },
    // 获取历史升级任务
    saveNum(arr) {
      this.start = arr[0];
      this.end = arr[1];
      this.getInfo();
    },
    getInfo() {
      this.loading = true;
      getupgradeTask({
        start: this.start,
        end: this.end,
        page: this.pagination.current,
        pageSize: this.pagination.pageSize,
      }).then((res) => {
        this.loading = false;
        this.pagination.total = res.data.total_num;
        if (res.data.total_num !== 0) {
          this.tableData = res.data.result;
        } else {
          this.tableData = [];
        }
      });
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination, filters, sorter);
      this.pagination = {
        ...pagination,
      };
      this.getInfo();
      // 传递参数获取最新数据
    },
  },
  mounted() {
    this.getInfo();
  },
};
</script>

<style lang="less" scoped>
.device-container {
  margin-bottom: 10px;
}
.active {
  color: red;
}
</style>
